<template>
  <div>
        <!-- @click-left="$router.back()" -->
    <van-nav-bar
      title="我的关注"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({path:'/'})"
    >
    <template #right>
      <van-icon name="wap-home-o" size="6vw"/>
    </template>
    </van-nav-bar>
    <!-- 2.0关注列表 -->
    <div class="list">
      <div class="item"
        v-for="(item,index) in follows"
        :key="item.id"
      >
        <van-image
          class="avater"
          :src="item.head_img | imgUrl"
        ></van-image>
        <div class="info">
          <h4 class="username">{{item.nickname}}</h4>
          <p class="dete">{{item.create_date | formatDate}}</p>
        </div>
        <div class="btn" 
          :class="{danger: !item.isFollow}"
          @click="followBtn(item.id,index)"
        >{{item.isFollow ? '取消关注' :'添加关注'}}</div>
      </div>
    </div>
    <van-empty v-if="!follows.length" description="空空如也" />
  </div>
</template>

<script>
    // get是关注用户列表
  import {
    getuserFollowsAPI,
    userFollowByIdAPI,
    FollowsByIdAPI,
  } from '../apis/user'
export default {
  data () {
    return {
      follows:[]
    }
  },
  async created() {
      const res = await getuserFollowsAPI()
      this.follows = res.data.data.map((item) => {
        return {...item,isFollow:true};
      });
  },
  methods:{
  async followBtn(id,index){
      // console.log("用户的id",id);
      const {isFollow} = this.follows[index];
      // 如果是已经关注 = 取消关注
      if(isFollow) {
        const res = await FollowsByIdAPI(id);
        console.log(1111,res);
      } else{
        const res = await userFollowByIdAPI(id);
        console.log(2222,res);
      }
      this.follows[index].isFollow = !this.follows[index].isFollow;
    }
  }
}
</script>

<style lang="less" scoped>
  .list{
    .item{
      height: 80px;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .avater{
        width: 40px;
        height: 40px;
      }
    .info{
      flex: 1;
      margin-left: 20px;
      .username{
        font-size: 16px;
      }
      .dete{
        font-size: 13px;
        margin-top: 5px;
        color: #666;
      }
    }
      .btn{
        width: 75px;
        line-height: 30px;
        text-align: center;
        background-color: #e1e1e1;
        border-radius: 50px;
        font-size: 12px;
      }
        .danger{
          background-color: red;
          color: #fff;
      }
    }
  }
</style>